<template>
  <div id="savemap" class="savemap">
    <!-- 主体地图显示 -->
    <el-container style="height: 30%">
      <el-main>
        <!-- 顶部工具栏 -->
        <!-- <top-tool-bar @alarmchind="alarmchind" /> -->
        <!-- 地图显示 -->
        <div id="map" style="height: 100% !important; width: 100%"></div>
        <!-- 线段、标段 的 开启按钮 -->
      </el-main>
    </el-container>
    <!-- 底部信息列表 -->
    <el-footer v-if="!hideFooter">
      <vdr class="vdr" @resizing="resize" :draggable="false">
        <div ref="footerTitle" class="footer_title">
          路线列表
          <i class="iconfont icon-shanchu" @click="toHideFooter()"></i>
        </div>
        <GD-view></GD-view>
      </vdr>
    </el-footer>
    <!-- <div class="cover" v-if="coverIsShow" @click="closeCover"></div> -->
    <!-- 左下角 列表展开按钮-->
    <div class="mini_legend" v-if="hideFooter" @click="showFooter()">
      路线列表
    </div>

    <!-- 右上 标段选择 作业类型选择 -->
    <div class="work-type-wrap">
      <!-- <el-button plain> 导 出 </el-button> -->
      <!-- <el-image
        style="width: 100px; height: 100px"
        :src="url"
        :preview-src-list="srcList"
      >
      </el-image> -->
      <!-- <el-button @click="exportExcel()" v-if="!isFull">导出</el-button> -->
      <el-button @click="screenshot2()" v-if="isFull">点击截图</el-button>
      <el-button @click="exitFullscreen()" v-if="isFull">退出导出</el-button>
      <el-button plain @click="setDistance"> 测 距 </el-button>
      <el-checkbox
        @change="changeRoadName"
        v-model="checkedRoadName"
        label="显示路名"
        border
        style="
          background: white;
          display: inline-block;
          margin-left: 10px;
          margin-right: 0px;
          height: 42px;
          padding: 11px 20px 10px 10px;
        "
      ></el-checkbox>
      <el-checkbox
        @change="changePointA"
        v-model="formPoint.showA"
        label="加水点"
        border
        style="
          background: white;
          display: inline-block;
          margin-left: 10px;
          margin-right: 0px;
          height: 42px;
          padding: 11px 20px 10px 10px;
        "
      ></el-checkbox>
      <el-checkbox
        @change="changePointP"
        v-model="formPoint.showP"
        label="排污点"
        border
        style="
          background: white;
          display: inline-block;
          margin-left: 10px;
          margin-right: 0px;
          height: 42px;
          padding: 11px 20px 10px 10px;
        "
      ></el-checkbox>
    </div>
    <div class="sliderHistory" v-if="setSlider.show">
      <!-- <el-image
      style="width: 30px; height: 30px"
      :src="url"
      fit="fill"></el-image> -->
      <!-- <el-button icon="el-icon-video-play" circle></el-button>
      <el-button type="danger" icon="el-icon-delete" circle></el-button> -->
      <el-slider
        v-model="setSlider.value"
        :step="setSlider.step"
        :max="setSlider.max"
        :format-tooltip="formatTooltipSlider"
        @input="inputSlider"
      ></el-slider>
      <!-- <el-button size="small" type="danger" @click="closeHistory">
        隐藏轨迹
      </el-button> -->
    </div>

    <!-- 左上 新建 路线详情 -->
    <div
      class="mini_legend"
      style="top: 100px; bottom: auto; margin-left: 10px;"
      v-if="!formDesignShow && formDesign.LINEID"
      @click="formDesignShow = true"
    >
      规划详情
    </div>
    <div class="edit-poly-list-wrap" v-if="formDesignShow">
      <i
        @click="formDesignShow = false"
        class="el-icon-circle-close"
        style="position: absolute; right: 10px; top: 15px; font-size: 30px"
      ></i>
      <div class="edit-poly-list">
        <div>
          <el-form ref="formDesign" :model="formDesign">
            <el-form-item label="路线名称：" style="width: 80%">
              <el-input
                disabled
                style="width: 207px"
                v-model="formDesign.LINENAME"
              ></el-input>
            </el-form-item>
            <el-form-item label="班次：">
              <el-input
                disabled
                style="width: 207px"
                v-model="formDesign.SNAME"
              ></el-input>
            </el-form-item>
            <div>
              <span style="padding-left: 5px; font-size: 14px; color: #333"
                >道路类型：
              </span>
              <el-checkbox-group
                v-model="roadLevel"
                @change="getRoadWorkInfoTemp"
                style="margin-bottom: 22px; display: inline-block"
                size="small"
              >
                <el-checkbox-button label="全部">全部</el-checkbox-button>
                <el-checkbox-button label="一级">一级</el-checkbox-button>
                <el-checkbox-button label="二级">二级</el-checkbox-button>
                <el-checkbox-button label="三级">三级</el-checkbox-button>
                <el-checkbox-button label="四级">四级</el-checkbox-button>
              </el-checkbox-group>
            </div>
            <div>
              <el-descriptions :column="2">
                <el-descriptions-item label="道路总数">{{
                  formDesign.StatisticsInfo.ROADNUM
                }}</el-descriptions-item>
                <el-descriptions-item label="道路总长">{{
                  formDesign.StatisticsInfo.ROADALLLENGTH
                }}</el-descriptions-item>
                <el-descriptions-item label="已规划道路数">{{
                  formDesign.StatisticsInfo.PLANROADNUM
                }}</el-descriptions-item>

                <el-descriptions-item label="规划路线总长">{{
                  formDesign.StatisticsInfo.PLANLENGTH
                }}</el-descriptions-item>
              </el-descriptions>
            </div>
          </el-form>
        </div>
        <div>
          <el-table :data="formDesign.data" max-height="192">
            <!-- {ROADID: "79", Rname: "北环大道", LINENAME: "华明四级2", RGrade: "四级", STATUS: "已规划"} -->
            <el-table-column
              prop="Rname"
              label="道路名称"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="RGrade"
              label="道路类型"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="STATUS"
              label="规划状态"
              align="center"
            ></el-table-column>
          </el-table>
        </div>
        <div
          style="
            position: absolute,
            text-align: center;
            margin-top: 15px;
          "
        >
          <el-button
            style="width: 49%; margin-bottom: 10px; margin-right: 2%"
            size="small"
            type="primary"
            @click="saveDesign()"
            >保存规划</el-button
          >
          <el-button
            style="width: 49%; margin-bottom: 10px; margin-left: 0px"
            size="small"
            type="danger"
            @click="deleteDesign()"
            >删除规划</el-button
          >
          <el-button
            style="
              width: 49%;
              margin-left: 0px;
              margin-bottom: 10px;
              margin-right: 2%;
            "
            size="small"
            :type="formMissing.type"
            @click="formMissing.show = true"
            >{{ formMissing.title }}</el-button
          >
          <el-button
            style="width: 49%; margin-left: 0px"
            size="small"
            @click="getHistory"
            >历史轨迹</el-button
          >
          <el-button
            style="
              width: 49%;
              margin-left: 0px;
              margin-bottom: 10px;
              margin-right: 2%;
            "
            size="small"
            @click="exportExcel"
            >导出Excel</el-button
          >
          <el-button
            style="width: 49%; margin-left: 0px"
            size="small"
            @click="requestFullScreen"
            >导出图片</el-button
          >
          <el-button
            style="width: 100%; margin-left: 0px"
            size="small"
            @click="tableForPolyCancle"
            >取 消</el-button
          >
        </div>
      </div>

      <!-- 面板切换选项卡 -->
      <!-- <div class="info-tabs">
        <a
          v-for="(item, index) in mapInfoTabs"
          :class="{ active: mapInfoTabValue === index }"
          :key="index"
          @click="changeMapInfoTabValue(index)"
        >
          <i :class="item.icon"></i>
        </a>
      </div> -->
    </div>

    <!-- 查遗漏 窗口展示 -->
    <el-dialog
      title="路线规划遗漏"
      :visible.sync="formMissing.show"
      width="50%"
    >
      <el-table max-height="500" :data="formMissing.data">
        <el-table-column
          prop="Rname"
          label="道路名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="RGrade"
          label="道路等级"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="STATUS"
          label="规划状态"
          align="center"
        ></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="formUnfound.show" width="30%">
      <p style="padding-left: 10px">未找到该路段，您点击点可能跨越多条路段</p>
      <p style="padding-left: 10px">如您【确定】此规划，则为两点之间连线</p>
      <p style="padding-left: 10px">
        如您【取消】此规划，则退回上一个点，重新规划。
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="UnfoundCancle">取 消</el-button>
        <el-button type="primary" @click="UnfoundSure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 引入垃圾点组件
import export2Excel from '@/utils/exportExcel/index.js'
import GDView from '@/views/Vehicle/Setting/SettingDesignLineTable.vue'
import { newMap } from '@/common/js/map.js'
import eventBus from '@/eventBus.js'
import imgMarker from "@/assets/img/marker/marker1.png";
import imgMarkerWater from '@/assets/img/marker/加水点.png'
import imgMarkerPollution from '@/assets/img/marker/排污水点.png'
// import ImageStart from '@/assets/img/playback/begin3.png'
// import ImageEnd from '@/assets/img/playback/end3.png'
import ImageStart1 from "@/assets/img/playback/STplan.png";
import ImageEnd1 from "@/assets/img/playback/ENDplan.png";
import ImageStart from "@/assets/img/playback/STreal.png";
import ImageEnd from "@/assets/img/playback/ENDreal.png";
import DirectionImg from '@/assets/img/playback/direction.png'
import html2canvas from "html2canvas";
export default {
  components: {
    // 'map-view': mapView,
    'GD-view': GDView,
  },
  data () {
    return {
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ],

      map: null,
      mapZoom: 15,
      mapCursor: null,
      distance: 10,

      isFull: false,


      arrayPolyline: [],
      arrayRoadNameLabel: [],
      arrayRoadDesignPoint: [],

      containerHeight: 0,
      footerHeight: 0,
      mainWidth: 0,
      asideWidth: 0,
      hideFooter: false,

      checkedRoadName: false,

      roadLevel: ["全部"],
      roadLevelValue: '',

      formMissing: {
        show: false,
        data: [],
        type: 'primary',
      },
      formDesign: {
        StatisticsInfo: null,
        show: false,
        data: [],
      },
      mapDesignLine: {
        markerCurrent: null,
        arrayDesign: [],
        arrayDesignPoint: [],
        numTurn: 0,
      },
      formUnfound: {
        show: null,
        point1: null,
        point2: null,
      },
      formPoint: {
        showP: true,
        showA: true,
        arrayMarkerP: [],
        arrayMarkerA: [],
      },
      formSelect: null,
      formHistory: {
        data: [],
        dataPolyline: [],
        markerS: null,
        markerE: null,
        markerD: null,
      },
      setSlider: {
        show: false,
        max: 100,
        value: 0,
        step: 1
      },
      arrayExport: [],
      formDesignShow: false,
    }
  },
  mounted () {
    eventBus.$emit('mapSize', document.querySelector('.el-main').clientHeight - 32)
    this.containerHeight = document.querySelector('.el-container').clientHeight
    this.footerHeight = document.querySelector('.el-footer').clientHeight
    this.mainWidth = document.querySelector('.el-main').clientWidth
    // this.asideWidth = document.querySelector('.el-aside').clientWidth

    // 显示地图
    this.mapShow()
    this.getPointFacility()
  },
  created () {
    // 显示底部列表
    // eventBus.$on('toShowFooter', () => {
    //   this.hideFooter = false;
    // })
    // // 隐藏底部列表
    // eventBus.$on('toHideFooter', () => {
    //   this.hideFooter = true;
    // })
    eventBus.$on('hideTableData', (val) => {
      this.formSelect = val;
    })
    // 路线规划 初始化
    eventBus.$on('roadLine_handleEdit', (val) => {
      this.toHideFooter();
      this.mapDesignLine.arrayDesign = []
      this.mapDesignLine.arrayDesignPoint = []
      this.formDesign = val
      this.formDesignShow = true
      this.formDesign.StatisticsInfo = { ROADNUM: "0", ROADALLLENGTH: "0", PLANROADNUM: "0", PLANLENGTH: "0" }
      this.mapDesignLine.numTurn = 0
      this.getRoudAllGPS()
      this.getDesignTableData()
      this.getDesignStatistics()
      this.getDesignMissing()
      if (val.ISPLAN != '0') {
        this.getRoudDesignGPS()
      }
    })
  },
  methods: {
    async getPointFacility () {
      var url = '/CarService/getPlaceWaterInfo?CLIENT_NO=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      // data.push({ "NAME": "西区加水点1", "LONGITUDE": "117.279008", "LATITUDE": "39.073569", "TYPE": "A" })
      // data.push({ "NAME": "西区排污点1", "LONGITUDE": "117.479008", "LATITUDE": "39.073569", "TYPE": "P" })
      // data.push({ "NAME": "西区排污点2", "LONGITUDE": "117.579008", "LATITUDE": "39.073569", "TYPE": "P" })

      var iconA = new BMap.Icon(imgMarkerWater, new BMap.Size(50, 50));
      var iconP = new BMap.Icon(imgMarkerPollution, new BMap.Size(50, 50));

      data.forEach(item => {
        var marker = null;
        switch (item.TYPE) {
          case 'A':
            item.TYPE_NAME = '加水点'
            marker = new BMap.Marker(new BMap.Point(item.LONGITUDE, item.LATITUDE), { icon: iconA });

            this.formPoint.arrayMarkerA.push(marker);
            break;
          case 'P':
            item.TYPE_NAME = '排污点'
            marker = new BMap.Marker(new BMap.Point(item.LONGITUDE, item.LATITUDE), { icon: iconP });
            this.formPoint.arrayMarkerP.push(marker);
            break;
        }
        var label = new BMap.Label(item.NAME, { offset: new BMap.Size(-10, 50) })
        marker.setLabel(label)
        marker.disableMassClear()
        this.map.addOverlay(marker);
      });

    },
    changePointA () {
      // console.log(this.formPoint.showA)
      this.formPoint.arrayMarkerA.forEach(element => {
        if (this.formPoint.showA) {
          element.show()
        } else {
          element.hide()
        }
      });
    },
    changePointP () {
      // console.log(this.formPoint.showP)
      this.formPoint.arrayMarkerP.forEach(element => {
        if (this.formPoint.showP) {
          element.show()
        } else {
          element.hide()
        }
      });
    },
    async getDesignMissing () {
      var url = "Vehicle/GetMissingLineDesignInfo?LID=" + this.formDesign.LINEID
      const { data } = await this.$Http.get(url)
      this.formMissing.data = data
      if (data.length === 0) {
        this.formMissing.title = '无遗漏'
        this.formMissing.type = 'info'
      } else {
        this.formMissing.title = '查看遗漏'
        this.formMissing.type = 'primary'
      }
      // this.formMissing.show = true
      // console.log(this.formDesign.StatisticsInfo)
    },

    async getDesignStatistics () {
      var url = "Vehicle/GetStatisticsLineDesignInfo?LID=" + this.formDesign.LINEID
      const { data } = await this.$Http.get(url)
      this.formDesign.StatisticsInfo = data[0]
      this.formDesign.StatisticsInfo.ROADALLLENGTH = parseFloat(this.formDesign.StatisticsInfo.ROADALLLENGTH).toFixed(2)
      if (this.formDesign.StatisticsInfo.PLANLENGTH != "0") {
        this.formDesign.StatisticsInfo.PLANLENGTH = parseFloat(this.formDesign.StatisticsInfo.PLANLENGTH).toFixed(2)
      }
      if (this.formDesign.StatisticsInfo.PLANROADNUM === "0") {
        this.formDesign.StatisticsInfo.PLANLENGTH = '0'
      }
      this.$forceUpdate()
    },
    async getDesignTableData () {
      var url = "Vehicle/GetLineDesignInfo?LID=" + this.formDesign.LINEID
      const { data } = await this.$Http.get(url)
      this.formDesign.data = data
      this.$forceUpdate()
    },
    async getRoudDesignGPS () {
      var url = "Vehicle/GetRoadDesignInfo?LID=" + this.formDesign.LINEID
      const { data } = await this.$Http.get(url)
      var itemInfo = data[0]
      var points = []

      for (let index = 0; index < data.length; index++) {
        const element = data[index];
        if (element.ROUDID === itemInfo.ROUDID && element.DIRECTION === itemInfo.DIRECTION) {
          points.push(new BMap.Point(element.LNG, element.LAT))
        } else {
          this.drawRoadDesign(points[0], points[points.length - 1], points, itemInfo)

          itemInfo = element
          points = []
          points.push(new BMap.Point(element.LNG, element.LAT))
        }
      }
      this.drawRoadDesign(points[0], points[points.length - 1], points, itemInfo)
      this.mapDesignLine.arrayDesign = []
      if (this.formDesign.ISPLAN != '1') {
        this.addDesignPoint1(points[points.length - 1]);
      }

    },
    // 编辑经纬度信息
    async getRoudAllGPS () {
      this.map.clearOverlays()
      var url = "Vehicle/GetLineRoadGPSInfoDesign?LID=" + this.formDesign.LINEID
      const { data } = await this.$Http.get(url)
      var itemInfo = data[0]

      var points = []
      var pointAll = []

      for (let index = 0; index < data.length; index++) {
        const element = data[index];
        if (element.ROUDID === itemInfo.ROUDID && element.NAME === itemInfo.NAME) {
          points.push(new BMap.Point(element.LNG, element.LAT))
          pointAll.push(new BMap.Point(element.LNG, element.LAT))
        } else {
          this.drawRoad(itemInfo, points)
          itemInfo = element

          points = []
          points.push(new BMap.Point(element.LNG, element.LAT))
        }
      }
      this.drawRoad(itemInfo, points)
      this.map.setViewport(pointAll);
    },
    drawRoad (itemInfo, points) {
      // 道路画线
      var polyline = new BMap.Polyline(points, { strokeColor: "#32CD32", strokeWeight: 4, strokeOpacity: 0.5 });   //创建折线
      this.map.addOverlay(polyline);
      // polyline.hide()

      polyline.ROUDID = itemInfo.ROUDID
      polyline.ROADNAME = itemInfo.NAME
      polyline.RGrade = itemInfo.RGrade
      polyline.ROADID = itemInfo.ID

      this.arrayPolyline.push(polyline)


      var lineCenter = polyline.getBounds().getCenter()
      var label = new BMap.Label(itemInfo.NAME, { position: lineCenter, offset: new BMap.Size(-20, -10) })
      label.setStyle({
        borderColor: '#fff',
        padding: '2px',
        borderRadius: '5px', // 可能内存成本很高
      })
      this.map.addOverlay(label);
      label.nameR = itemInfo.NAME
      label.idR = itemInfo.ROUDID
      this.arrayRoadNameLabel.push(label)
      if (!this.checkedRoadName) {
        label.hide()
      }
      var pointS = points[0];
      var pointE = points[points.length - 1];

      // var label1 = new BMap.Label(pointS.lng + ', ' + pointS.lat, { position: pointS})
      // this.map.addOverlay(label1);
      // var label2 = new BMap.Label(pointE.lng + ', ' + pointE.lat, { position: pointE})
      // this.map.addOverlay(label2);

      var myIcon = new BMap.Icon(imgMarker, new BMap.Size(20, 20), { imageOffset: new BMap.Size(0, 0) })
      var markerS = new BMap.Marker(pointS, { icon: myIcon });// 创建标注
      var markerE = new BMap.Marker(pointE, { icon: myIcon });// 创建标注
      this.map.addOverlay(markerS);
      this.map.addOverlay(markerE);

      markerS.ROUDID = itemInfo.ROUDID
      markerE.ROUDID = itemInfo.ROUDID

      const _this = this
      markerS.addEventListener("click", function () {
        console.log('markerS')
        console.log(this.getPosition())
        console.log(_this.mapDesignLine.arrayDesign)
        console.log(_this.mapDesignLine.arrayDesignPoint)
        _this.addDesignPoint1(this.getPosition());
      });
      markerE.addEventListener("click", function () {
        console.log('markerE')
        console.log(this.getPosition())
        console.log(_this.mapDesignLine.arrayDesign)
        console.log(_this.mapDesignLine.arrayDesignPoint)
        _this.addDesignPoint1(this.getPosition());
      });
      // polyline.addEventListener('click', function (e) {
      //   console.log(this.getPath())
      //   // _this.addRoudInfo(this.rname, 1)
      // })
    },
    // 开始规划第一步
    addDesignPoint1 (point) {
      if (this.formDesign.ISPLAN === '1') {
        return
      }
      this.mapDesignLine.markerCurrent.show();
      this.mapDesignLine.markerCurrent.setPosition(point)

      if (this.mapDesignLine.arrayDesignPoint.length > 0) {
        var pointLest = this.mapDesignLine.arrayDesignPoint[this.mapDesignLine.arrayDesignPoint.length - 1]
        this.addDesignPoint3(pointLest, point)
      }
      this.mapDesignLine.arrayDesignPoint.push(point)
    },
    addDesignPoint3 (point1, point2) {
      var lineAccurate = null
      var lineInfo = null;
      this.arrayPolyline.forEach(element => {
        var arrayPoint = element.getPath()
        var pointSS = arrayPoint[0]
        var pointEE = arrayPoint[arrayPoint.length - 1]
        if (point1.equals(pointSS)) {
          if (point2.equals(pointEE)) {
            lineAccurate = element
            lineInfo = { 'ROADID': element.ROADID, 'ROUDID': element.ROUDID, 'DIRECTION': 0 }
            // this.mapDesignLine.arrayDesign.push({ 'ROADID': element.ROADID, 'ROUDID': element.ROUDID, 'DIRECTION': 0 })
          }
        } else {
          if (point1.equals(pointEE)) {
            if (point2.equals(pointSS)) {
              lineAccurate = element
              lineInfo = { 'ROADID': element.ROADID, 'ROUDID': element.ROUDID, 'DIRECTION': 1 }
              // this.mapDesignLine.arrayDesign.push({ 'ROADID': element.ROADID, 'ROUDID': element.ROUDID, 'DIRECTION': 1 })
            }
          }
        }
      });
      // 查找结果
      if (lineAccurate) {
        var arrP = lineAccurate.getPath().slice();
        var lengthP = arrP.length;
        var arrPNew = []
        if (lineInfo.DIRECTION === 1) {
          for (let i = lengthP - 1; i > -1; i--) {
            arrPNew.push(arrP[i])
          }
          this.drawRoadDesign(point1, point2, arrPNew, lineInfo)
        } else {
          // arrPNew = arrP
          this.drawRoadDesign(point1, point2, arrP, lineInfo)
        }

      } else {
        this.formUnfound.point1 = point1;
        this.formUnfound.point2 = point2;
        this.formUnfound.show = true
        // this.$confirm('<p style="padding-left: 10px;">未找到该道路，或您可能跨过多条道路</p><p style="padding-left: 10px;">如您【确定】此规划，则为两点之间连线</p><p style="padding-left: 10px;">您也可以选择【取消】，退回上一个点，重新规划。</p>', '提示', {
        //   dangerouslyUseHTMLString: true,
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        // }).then(() => {
        //   // 确定
        //   // itemInfo = { 'ROUDID': '', 'LNG': point1.lng, 'LAT': point1.lat }
        //   // this.mapDesignLine.arrayDesign.push({ 'ROUDID': '', 'LNG': point1.lng, 'LAT': point1.lat })
        //   // this.mapDesignLine.arrayDesign.push({ 'ROUDID': '', 'LNG': point2.lng, 'LAT': point2.lat })
        //   this.drawRoadDesign(point1, point2, [point1, point2], null)
        // }).catch(() => {
        //   // 取消
        //   this.mapDesignLine.markerCurrent.setPosition(point1)
        //   this.mapDesignLine.arrayDesignPoint.pop()
        // });
        // return false
      }
    },
    UnfoundCancle () {
      this.formUnfound.show = false
      this.mapDesignLine.markerCurrent.setPosition(this.formUnfound.point1)
      this.mapDesignLine.arrayDesignPoint.pop()
    },
    UnfoundSure () {
      this.formUnfound.show = false
      this.drawRoadDesign(this.formUnfound.point1, this.formUnfound.point2, [this.formUnfound.point1, this.formUnfound.point2], null)
    },
    drawRoadDesign (pointLest, point, pointArr, itemInfo) {
      // console.log(pointArr)
      var pointNewArr = []
      var changMax = null
      for (let Hg = 0; Hg < pointArr.length; Hg++) {

        // var label1 = new BMap.Label(Hg, { position: pointArr[Hg], offset: new BMap.Size(-10, 50) })
        // this.map.addOverlay(label1);

        // var changMax = this.dataList[i][0].changeMax;
        //第一个点
        if (Hg == 0) {
          pointNewArr.push(
            this.getCorrentVehicleInfoThree(
              pointArr[Hg],
              pointArr[Hg],
              pointArr[Hg + 1],
              pointArr,
              // point,
              // changMax
            )
          );
        }
        //最后一个点
        else if (Hg == pointArr.length - 1) {
          pointNewArr.push(
            this.getCorrentVehicleInfoThree(
              pointArr[Hg - 1],
              pointArr[Hg],
              pointArr[Hg],
              pointArr,
              // point,
              // changMax
            )
          );
        } else {
          pointNewArr.push(
            this.getCorrentVehicleInfoThree(
              pointArr[Hg - 1],
              pointArr[Hg],
              pointArr[Hg + 1],
              pointArr,
              // point,
              // changMax
            )
          );
        }
      }
      // console.log(pointNewArr)
      var sy = new BMap.Symbol('M162.736806 420.207741 69.106115 513.838433C55.316568 527.627981 32.959294 527.627981 19.169747 513.838433 5.380199 500.048885 5.380199 477.691611 19.169747 463.902065L112.800438 370.271373 462.459671 20.61214C475.955728 7.116083 493.590221 0.253295 511.296501 0.006868 530.22565-0.043027 548.344615 6.833653 562.123102 20.61214L911.782335 370.271373 1005.413026 463.902065C1019.202572 477.691611 1019.202572 500.048885 1005.413026 513.838433 991.623479 527.627981 969.266204 527.627981 955.476657 513.838433L861.845967 420.207741C861.845967 420.207741 635.791367 194.142291 547.310345 105.556891L547.310345 988.689655C547.310345 1008.19102 531.501365 1024 512 1024 492.498635 1024 476.689655 1008.19102 476.689655 988.689655L476.689655 106.254893 162.736806 420.207741Z', {
        scale: 0.01,//图标缩放大小
        // fillColor: 'yellow',//设置矢量图标的线填充颜色
        // fillOpacity: 1, //图标填充透明度
        strokeColor: 'yellow',//设置矢量图标的线填充颜色
        strokeWeight: '2',//设置线宽
        // rotation : '90deg', //图标旋转角度
        // anchor:new BMap.Size(100, 0)
      });
      sy.setAnchor(new BMap.Size(520, 0));
      var icons = new BMap.IconSequence(sy, '10', '100');
      var polyline = new BMap.Polyline(pointNewArr
        , {
          enableEditing: false,//是否启用线编辑，默认为false
          enableClicking: false,//是否响应点击事件，默认为true
          icons: [icons],
          strokeWeight: '10',//折线的宽度，以像素为单位
          strokeOpacity: 0.5,//折线的透明度，取值范围0 - 1
          strokeColor: 'blue' //折线颜色
          // }
          // , { strokeColor: 'blue', strokeWeight: 4, strokeOpacity: 0.5
        });   //创建折线
      this.map.addOverlay(polyline);   //增加折线
      var itemExport = {}
      if (itemInfo === null) {
        itemInfo = { 'ROUDID': '', 'Polyline': polyline, 'arrPoint': polyline.getPath() }
        // this.mapDesignLine.arrayDesign.push({ 'ROUDID': '', 'LNG': pointLest.lng, 'LAT': pointLest.lat, 'Polyline': polyline })
        this.mapDesignLine.arrayDesign.push(itemInfo)
      } else {
        itemInfo.Polyline = polyline
        itemInfo.arrPoint = polyline.getPath()
        this.mapDesignLine.arrayDesign.push(itemInfo)

        // itemExport.ROUDID = itemInfo.ROUDID
        // this.arrayRoadNameLabel
        var arrlabel = this.arrayRoadNameLabel.filter(item => item.idR === itemInfo.ROUDID)
        if (arrlabel.length > 0) {
          itemExport.nameR = arrlabel[0].nameR
        }
      }
      var k = this.getAngleHistory(polyline.getPath()[0].lng, polyline.getPath()[0].lat, polyline.getPath()[1].lng, polyline.getPath()[1].lat)
      // console.log(k)
      itemExport.direction = '向' + this.getDirectionStr(k)


      if (this.mapDesignLine.arrayDesign.length > 1) {
        var arrPointDL = this.mapDesignLine.arrayDesign[this.mapDesignLine.arrayDesign.length - 2].arrPoint
        var angle1 = this.getAngle(arrPointDL[arrPointDL.length - 2], arrPointDL[arrPointDL.length - 1])
        var angle2 = this.getAngle(polyline.getPath()[0], polyline.getPath()[1])

        var angleDValue = angle1 - angle2;
        // console.log(angleDValue)
        var absoluteValue = Math.abs(angleDValue);
        var strTurn = ''
        if ((angleDValue > -330 && angleDValue < -210) || (angleDValue > 30 && angleDValue < 150)) {
          strTurn = '左转'
        }
        if ((angleDValue > 210 && angleDValue < 330) || (angleDValue > -150 && angleDValue < -30)) {
          strTurn = '右转'
        }
        if ((angleDValue > 70 && angleDValue < 110) || (angleDValue > -200 && angleDValue < -160) || (angleDValue > 160 && angleDValue < 200) || (angleDValue > 340)) {
          strTurn = '调头'
        }

        if (absoluteValue > 40) {
          this.arrayExport.push({ turn: strTurn })

          this.mapDesignLine.numTurn++;
          var pointCenter = new BMap.Bounds(arrPointDL[arrPointDL.length - 2], arrPointDL[arrPointDL.length - 1]).getCenter()
          var opts = {
            position: pointCenter, // 指定文本标注所在的地理位置
            offset: this.getOffsetSize(angle1) // 设置文本偏移量
          };
          // 创建文本标注对象
          var strlabel = this.mapDesignLine.numTurn + ', ' + strTurn
          // console.log(strlabel)
          var label = new BMap.Label(strlabel, opts)
          itemInfo.turnLabel = label
          // label.setStyle({
          //   borderColor: '#fff',
          //   padding: '2px',
          //   borderRadius: '5px', // 可能内存成本很高
          // })
          this.map.addOverlay(label);

        }
      } else {
        var k0 = k + 180
        if (k0 > 360) {
          k0 -= 360
        }
        itemExport.nameR = this.getDirectionStr(k0) + '口' + itemExport.nameR
      }
      this.arrayExport.push(itemExport)
    },
    getDirectionStr (k) {
      if ((k > 0 && k < 35) || (k > 325 && k < 360)) {
        return '北'
      }
      if ((k > 35 && k < 55)) {
        return '东北'
      }
      if ((k > 55 && k < 125)) {
        return '东'
      }
      if ((k > 125 && k < 145)) {
        return '东南'
      }
      if ((k > 145 && k < 215)) {
        return '南'
      }
      if ((k > 215 && k < 235)) {
        return '西南'
      }
      if ((k > 235 && k < 305)) {
        return '西'
      }
      if ((k > 305 && k < 325)) {
        return '西北'
      }
      return '北'
    },
    getOffsetSize (angle) {
      //偏移系数X
      var facX = 0;
      //偏移系数Y
      var facY = 0;
      if (angle > 270) {
        angle = angle - 270
        facX = -1
        facY = -1
      } else if (angle > 180) {
        angle = angle - 180
        facX = -1
        facY = +1
      } else if (angle > 90) {
        angle = angle - 90
        facX = +1
        facY = +1
      } else {
        facX = +1
        facY = -1
      }

      var length = 10;
      // 将角度转换为弧度
      var radian = ((2 * Math.PI) / 360) * angle;
      // 计算对边长度（‌假设已知的是角度和斜边）‌
      var opposite_side = Math.sin(radian) * length;

      // 计算邻边长度（‌假设邻边是最短的那条边）‌
      var adjacent_side = Math.cos(radian) * length;
      //  AC=AB*Cos∠A=c*Cosa ， BC=AB*Sin∠A=c*Sina 。
      if (facX === facY) {
        return new BMap.Size(adjacent_side.toFixed(2) * facX, opposite_side.toFixed(2) * facY);
      } else {
        return new BMap.Size(opposite_side.toFixed(2) * facX, adjacent_side.toFixed(2) * facY);
      }
    },
    getAngle (point_a, point_b) {
      var lng_a = point_a.lng, lat_a = point_a.lat, lng_b = point_b.lng, lat_b = point_b.lat;

      var a = (90 - lat_b) * Math.PI / 180;
      var b = (90 - lat_a) * Math.PI / 180;
      var AOC_BOC = (lng_b - lng_a) * Math.PI / 180;
      var cosc = Math.cos(a) * Math.cos(b) + Math.sin(a) * Math.sin(b) * Math.cos(AOC_BOC);
      var sinc = Math.sqrt(1 - cosc * cosc);
      var sinA = Math.sin(a) * Math.sin(AOC_BOC) / sinc;
      var A = Math.asin(sinA) * 180 / Math.PI;
      var res = 0;
      if (lng_b > lng_a && lat_b > lat_a) res = A;
      else if (lng_b > lng_a && lat_b < lat_a) res = 180 - A;
      else if (lng_b < lng_a && lat_b < lat_a) res = 180 - A;
      else if (lng_b < lng_a && lat_b > lat_a) res = 360 + A;
      else if (lng_b > lng_a && lat_b == lat_a) res = 90;
      else if (lng_b < lng_a && lat_b == lat_a) res = 270;
      else if (lng_b == lng_a && lat_b > lat_a) res = 0;
      else if (lng_b == lng_a && lat_b < lat_a) res = 180;
      return res;
    },
    changeRoadName () {
      this.arrayRoadNameLabel.forEach(element => {
        if (this.checkedRoadName) {
          element.show()
        } else {
          element.hide()
        }
      });
    },
    getRoadWorkInfoTemp () {
      var lengthRL = this.roadLevel.length
      if (this.roadLevel[lengthRL - 1] === '全部' || lengthRL === 0) {
        this.roadLevel = ["全部"]
      } else if (this.roadLevel[0] === '全部') {
        this.roadLevel.splice(0, 1);
      } else if (lengthRL == 4) {
        this.roadLevel = ["全部"]
      }
      console.log(this.roadLevel)
      if (this.roadLevel[0] === '全部') {
        this.arrayPolyline.forEach(element => {
          element.show()
        });
      } else {
        this.arrayPolyline.forEach(element => {
          if (this.roadLevel.includes(element.RGrade)) {
            element.show()
          } else {
            element.hide()
          }
        });
      }
    },
    // 新增保存
    async saveDesign () {
      var arrPara = []
      for (let index = 0; index < this.mapDesignLine.arrayDesign.length; index++) {
        const element = this.mapDesignLine.arrayDesign[index];
        if (element.ROUDID === '') {
          var arrPath = element.Polyline.getPath()
          for (let a = 0; a < arrPath.length; a++) {
            const pointA = arrPath[a];
            arrPara.push({ 'ROUDID': '', 'LNG': pointA.lng, 'LAT': pointA.lat })
          }
        } else {
          arrPara.push({ 'ROADID': element.ROADID, 'ROUDID': element.ROUDID, 'DIRECTION': element.DIRECTION })
        }
      }
      arrPara[0].LINEID = this.formDesign.LINEID
      this.$axios({
        url: 'Vehicle/SaveLineDesignInfo',
        method: 'post',
        data: arrPara,
      }).then((res) => {
        console.log(res)
        if (res.data.IsSucess) {
          this.$message.success('新增成功');
          this.tableForPolyCancle()
          eventBus.$emit('roadLine_reTableData', null)
        } else {
          this.$message.error('新增失败');
        }
      })
    },
    async deleteDesign () {
      const confirmResult = await this.$confirm('是否确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult == 'confirm') {
        this.loading = true
        var url = 'Vehicle/DeleteLineDesignInfo?LID=' + this.formDesign.LINEID
        const { data } = await this.$Http.get(url)
        if (data.IsSucess) {
          this.$message.success('删除成功')
          this.tableForPolyCancle()
          eventBus.$emit('roadLine_reTableData', null)
        } else {
          this.$message.error('删除失败');
        }
      } else {
        this.$message.info('取消删除')
      }
    },
    // 显示地图
    mapShow () {
      // 百度地图API功能
      // this.map = newMap()
      this.map = new BMap.Map('map')// 创建Map实例
      this.map.enableScrollWheelZoom(true)//开启鼠标滚轮缩放
      this.map.disableDoubleClickZoom()
      this.map.centerAndZoom(new BMap.Point(117.227853, 39.163488), this.mapZoom)// 初始化地图,设置中心点坐标和地图级别

      var marker = new BMap.Marker(new BMap.Point(0, 0));  // 创建标注
      this.map.addOverlay(marker);
      marker.disableMassClear()
      marker.setAnimation(BMAP_ANIMATION_BOUNCE);
      marker.hide()
      this.mapDesignLine.markerCurrent = marker;

      var marker1 = new BMap.Marker(new BMap.Point(0, 0), { icon: new BMap.Icon(DirectionImg, new BMap.Size(20, 26)) })
      marker1.disableMassClear()
      // marker1.hide()
      this.map.addOverlay(marker1)
      this.formHistory.markerD = marker1

      const _this = this
      this.map.addEventListener('dblclick', function (e) {
        _this.mapDesignLine.markerCurrent.hide()
      });
      this.map.addEventListener('rightclick', function (e) {
        _this.deleteOneStepDesign()
      });
      //缩放屏幕
      this.map.addEventListener("zoomend", function (e) {
        console.log("地图缩放至：" + this.getZoom() + "级");
        //      //15/20-16
        // //30-15
        // //50-15
        // //70-13
        //   var dist = 10
        //   if (e.target.getZoom() < 14) {
        //     dist = 70

        //   } else if (e.target.getZoom() === 14) {
        //     dist = 50
        //   } else if (e.target.getZoom() === 15) {
        //     dist = 30
        //   } else if (e.target.getZoom() === 16) {
        //     dist = 20
        //   } else {
        //     dist = 10
        //   }
        //   if (_this.distance != dist) {
        //     _this.offsetRoadDesign()
        //     _this.distance = dist
        //   }
      });
    },
    deleteOneStepDesign () {
      console.log(this.mapDesignLine.arrayDesign)
      console.log(this.mapDesignLine.arrayDesignPoint)
      if (this.mapDesignLine.arrayDesign.length > 0) {
        // 上一个规划对象
        var lestDesign = this.mapDesignLine.arrayDesign[this.mapDesignLine.arrayDesign.length - 1]

        if (lestDesign.turnLabel) {
          this.map.removeOverlay(lestDesign.turnLabel)
          this.mapDesignLine.numTurn--
        }
        // 删除地图上的规划辅助线
        this.map.removeOverlay(lestDesign.Polyline)
        // 删除编辑点
        this.mapDesignLine.arrayDesignPoint.pop()
        // 删除规划对象
        this.mapDesignLine.arrayDesign.pop()

        // 找上一个点，如果是顺序就是第一个点
        var lestPoint = this.mapDesignLine.arrayDesignPoint[this.mapDesignLine.arrayDesignPoint.length - 1]
        // 修改提示点经纬度
        this.mapDesignLine.markerCurrent.setPosition(lestPoint)
      }
    },
    tableForPolyCancle () {
      this.formDesign = {}
      this.formDesign.data = []
      this.formDesignShow = false
      this.mapDesignLine.arrayDesign = []
      this.mapDesignLine.arrayDesignPoint = []

      this.map.clearOverlays()
      this.mapDesignLine.markerCurrent.hide()
      this.mapDesignLine.numTurn = 0

      this.showFooter()
    },

    async getHistory () {
      // var url = "Vehicle/GetMissingLineDesignInfo?LID=" + this.formDesign.LINEID
      var url = 'Vehicle/GetVehicleHistoryInfo?VID=16474&StartDate=2024-07-22+00:00:00&EndDate=2024-07-23+00:00:00'
      const { data } = await this.$Http.get(url)
      this.formHistory.data = data
      this.setSlider.max = data.length
      this.setSlider.show = true
      this.formHistory.markerD.show()
      this.formHistory.markerD.setPosition(new BMap.Point(0, 0))
      this.drawHistory()
    },
    closeHistory () {
      this.setSlider.show = false
      this.formHistory.markerD.hide()
      this.formHistory.dataPolyline.forEach(element => {
        this.map.removeOverlay(element)
      });
      this.map.removeOverlay(this.formHistory.markerS)
      this.map.removeOverlay(this.formHistory.markerE)
    },
    formatTooltipSlider (val) {
      if (val > 0) {
        return this.formHistory.data[val - 1].GPSTIME
      }
    },
    inputSlider (val) {
      this.formHistory.markerD.show()
      // 设置标记点坐标位置
      var pointChangeSlider = new BMap.Point(this.formHistory.data[val].LNG, this.formHistory.data[val].LAT)
      this.formHistory.markerD.setPosition(pointChangeSlider)
      // 获取两个标记点的角度
      var k = 0
      if (val > 0) {
        k = this.getAngleHistory(this.formHistory.data[(val - 1)].LNG, this.formHistory.data[(val - 1)].LAT, this.formHistory.data[val].LNG, this.formHistory.data[val].LAT)
      }
      // 设置标记点方向
      this.formHistory.markerD.setRotation(k)
      // 如果点位在当前地图显示范围外，则将该点设置为地图中心
      if (!this.map.getBounds().containsPoint(pointChangeSlider)) {
        this.map.centerAndZoom(pointChangeSlider, this.mapZoom)
      }
    },
    // 获取两个点的角度
    getAngleHistory (lng1, lat1, lng2, lat2) {
      const a = (90 - lat2) * Math.PI / 180
      const b = (90 - lat1) * Math.PI / 180
      const AOC_BOC = (lng2 - lng1) * Math.PI / 180
      const cosc = Math.cos(a) * Math.cos(b) + Math.sin(a) * Math.sin(b) * Math.cos(AOC_BOC)
      const sinc = Math.sqrt(1 - cosc * cosc)
      const sinA = Math.sin(a) * Math.sin(AOC_BOC) / sinc
      const A = Math.asin(sinA) * 180 / Math.PI
      let res = 0
      if (lng2 > lng1 && lat2 > lat1) res = A
      else if (lng2 > lng1 && lat2 < lat1) res = 180 - A
      else if (lng2 < lng1 && lat2 < lat1) res = 180 - A
      else if (lng2 < lng1 && lat2 > lat1) res = 360 + A
      else if (lng2 > lng1 && lat2 === lat1) res = 90
      else if (lng2 < lng1 && lat2 === lat1) res = 270
      else if (lng2 === lng1 && lat2 > lat1) res = 0
      else if (lng2 === lng1 && lat2 < lat1) res = 180
      return res
    },
    drawHistory () {
      const _this = this
      var pointArr = [];
      var boundPoints = [];
      var lastLock = 0
      for (var i = 0; i < this.formHistory.data.length; i++) {

        var item = this.formHistory.data[i]

        item.GPSTIME = item.GPSTIME.replace('T', ' ')

        pointArr.push(new BMap.Point(item.LNG, item.LAT))
        boundPoints.push(new BMap.Point(item.LNG, item.LAT))
        if (i != 0) {
          if (item.LOCK != lastLock) {
            drawLine(pointArr, lastLock)
            pointArr = [new BMap.Point(item.LNG, item.LAT)]
          }
        }
        lastLock = item.LOCK
      }
      if (pointArr.length) {
        drawLine(pointArr, lastLock)
      }
      function drawLine (points, lastLock) {
        var color = '#FF00FF'
        if (lastLock == 0) {
          color = 'black'
        }
        var polylineH = new BMap.Polyline(points, {
          strokeColor: color,
          strokeWeight: 4,
          strokeOpacity: 2
        })
        _this.formHistory.dataPolyline.push(polylineH)
        _this.map.addOverlay(polylineH)
      }

      this.formHistory.markerS = new BMap.Marker(new BMap.Point(this.formHistory.data[0].LNG, this.formHistory.data[0].LAT), { icon: new BMap.Icon(ImageStart, new BMap.Size(40, 34), { anchor: new BMap.Size(20, 34) }) })
      this.map.addOverlay(this.formHistory.markerS)
      this.formHistory.markerE = new BMap.Marker(new BMap.Point(this.formHistory.data[(this.formHistory.data.length - 1)].LNG, this.formHistory.data[(this.formHistory.data.length - 1)].LAT), { icon: new BMap.Icon(ImageEnd, new BMap.Size(40, 34), { anchor: new BMap.Size(20, 34) }) })
      this.map.addOverlay(this.formHistory.markerE)
      // this.map.setViewport(boundPoints);
    },

    // 测距
    setDistance () {
      if (!this.mapCursor) {
        this.mapCursor = new BMapLib.DistanceTool(this.map)
      }
      if (this.mapCursor.isOpen) {
        // 结束测量
        this.mapCursor.close()
      } else {
        // 开始测量
        this.mapCursor.open()
      }
    },
    // 隐藏底部列表
    toHideFormD () {
      console.log('隐藏')
      this.formDesignShow = false
    },
    // 显示底部列表
    toShowFormD () {
      this.formDesignShow = true;
    },
    // 隐藏底部列表
    toHideFooter () {
      this.hideFooter = true;
    },
    // 显示底部列表
    showFooter () {
      eventBus.$emit('showTableData', this.formSelect)
      this.hideFooter = false;
    },
    // 信息列表窗口缩放
    resize (x, y) {
      document.querySelector('.el-footer').style.height = this.footerHeight - y + 'px'
      document.querySelector('.el-container').style.height = this.containerHeight + y + 'px'
      eventBus.$emit('mapSize', y)
    },
    // 报警列表信息缩放
    // resizeWidth (x) {
    //   document.querySelector('.el-aside').style.width = this.asideWidth - x + 'px'
    //   document.querySelector('.el-main').style.width = this.mainWidth + x + 'px !important'
    // },

    getCorrentVehicleInfoThree (
      info1,
      info2,
      info3,
      points,
      // infoEE,
      // changeMax
    ) {

      var infoSS = points[0]
      var infoEE = points[points.length - 1]
      // console.log(infoSS, infoEE, points)
      //两点之间的弧度
      var offAngel = 0;
      var info = new Object();
      var xiangxian = "";
      //两点经度差

      var offXX = info3.lng * 1 - info1.lng * 1;
      //两点纬度差
      var offYY = info3.lat * 1 - info1.lat * 1;
      //经度偏移
      var offLng = 0;

      //纬度偏移
      var offLat = 0;

      //偏移系数X
      var facX = 0;

      //偏移系数Y
      var facY = 0;

      if (info3.lng != info1.lng) {
        offAngel = Math.atan2(Math.abs(offXX), Math.abs(offYY));
      }

      var offX = infoEE.lng * 1 - infoSS.lng * 1;
      //两点纬度差
      var offY = infoEE.lat * 1 - infoSS.lat * 1;

      //第一象限
      if (offX > 0 && offY > 0) {
        xiangxian = "一象限";
        facX = -1;
        facY = 1;
      }
      //第二象限
      else if (offX < 0 && offY > 0) {
        xiangxian = "二象限";
        facX = -1;
        facY = -1;
      }
      //第三象限
      else if (offX < 0 && offY < 0) {
        xiangxian = "三象限";
        facX = 1;
        facY = -1;
      }
      //第四象限
      else if (offX > 0 && offY < 0) {
        xiangxian = "四象限";
        facX = 1;
        facY = 1;
      } else if (offX == 0 && offY > 0) {
        xiangxian = "一象限";
        facX = -1;
        facY = 0;
      } else if (offX < 0 && offY == 0) {
        xiangxian = "二象限";

        facX = 0;
        facY = -1;
      } else if (offX == 0 && offY < 0) {
        xiangxian = "三象限";
        facX = 1;
        facY = 0;
      } else if (offX > 0 && offY == 0) {
        xiangxian = "四象限";
        facX = 0;
        facY = 1;
      }

      // switch (changeMax) {
      //   case "X+":
      //     facY = -1;
      //     break;

      //   case "X-":
      //     facY = 1;
      //     break;

      //   case "X0":
      //     facY = -1;
      //     break;

      //   case "Y+":
      //     facX = 1;
      //     break;

      //   case "Y-":
      //     facX = -1;
      //     break;

      //   case "Y0":
      //     facX = 1;
      //     break;
      // }



      facX = -1.0 * facX;
      facY = -1.0 * facY;

      //计算偏移
      var offSet = this.distance * 0.00001;
      offLng = offSet * Math.cos(offAngel);
      offLat = offSet * Math.sin(offAngel);

      var lng = info2.lng * 1 + facX * offLng;
      var lat = info2.lat * 1 + facY * offLat;

      return new BMap.Point(lng, lat);
    },
    // 导出Excel
    exportExcel () {
      const excelName = '规划路线文字描述'
      const tHeader = ['路名', '方向', '转向']
      const filterVal = ['nameR', 'direction', 'turn']
      export2Excel(tHeader, filterVal, this.arrayExport, excelName)
    },
    // 进入全屏
    requestFullScreen () {
      this.formDesignShow = false
      this.isFull = true;
      eventBus.$emit("contentToFullScreen");
      var de = document.documentElement;
      if (de.requestFullscreen) {
        de.requestFullscreen();
      } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
      } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
      }
    },
    // 退出全屏
    exitFullscreen () {
      this.isFull = false;
      eventBus.$emit("contentToDefaultScreen");
      var de = document;
      if (de.exitFullscreen) {
        de.exitFullscreen();
      } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen();
      } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen();
      }
    },
    // async function screenshot() {  
    async screenshot () {
      let canvas = document.querySelector(".savemap");
      canvas.width = 1000;
      canvas.height = 500;

      // 将视频播放的内容绘制到canvas上  
      const ctx = canvas.getContext('2d');
      // context.drawImage(video, 0, 0, canvas.width, canvas.height);
      //  var canvas = document.getElementById('savemap');
      // var ctx = canvas.getContext('2d');
      // draw any shape
      ctx.beginPath();
      ctx.moveTo(120, 50);
      ctx.bezierCurveTo(130, 100, 130, 250, 330, 150);
      ctx.bezierCurveTo(350, 180, 320, 180, 240, 150);
      ctx.bezierCurveTo(320, 150, 420, 120, 390, 100);
      ctx.bezierCurveTo(130, 40, 370, 30, 240, 50);
      ctx.bezierCurveTo(220, 7, 350, 20, 150, 50);
      ctx.bezierCurveTo(250, 5, 150, 20, 170, 80);
      ctx.closePath();
      ctx.lineWidth = 3;
      ctx.fillStyle = '#F1F1F1';
      ctx.fill();
      ctx.stroke();
      var dataURL = canvas.toDataURL();
      this.url = dataURL
    },
    async screenshot2 () {
      // 获取屏幕流  
      const displayMediaOptions = {
        video: {
          cursor: "always"
        }
      };
      const stream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);

      // 创建一个video元素来播放屏幕流  
      const video = document.createElement('video');
      video.srcObject = stream;
      await video.play();

      // 创建一个canvas元素来截屏  
      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;

      // 将视频播放的内容绘制到canvas上  
      const context = canvas.getContext('2d');
      context.drawImage(video, 0, 0, canvas.width, canvas.height);

      // 将canvas内容转换为base64  
      // const base64 = canvas.toDataURL('image/png');
      // this.url = base64
            // var image = document.getElementById("image");

      // image.src = canvas.toDataURL(mime);
      var link = document.createElement('a');
      link.download = 'saved-image.png'; // 设置下载文件名
      link.href = canvas.toDataURL('image/png'); // 设置下载的数据
      link.click();

      // const pdf = new jsPDF({
      //   unit: 'pt',
      //   format: 'a4',
      //   orientation: 'p',
      // });
      // // const canvas = await html2canvas(element,
      // //   {
      // //     onrendered: function (canvas) {
      // //       document.body.appendChild(canvas);
      // //     }
      // //   }
      // // );
      // const canvasData = canvas.toDataURL('image/png', 1.0);
      // pdf.addImage(canvasData, 10, 10);
      // pdf.save('jecyu.pdf');



      // console.log(base64)
      // this.saveFile(base64, '路线规划截图')
      // return base64;


      // let type = "png";
      // let imgData = canvas.toDataURL(type);
      // // 照片格式处理
      // let _fixType = function (type) {
      //   type = type.toLowerCase().replace(/jpg/i, "jpeg");
      //   let r = type.match(/png|jpeg|bmp|gif/)[0];
      //   return "image/" + r;
      // };
      // imgData = imgData.replace(_fixType(type), "image/octet-stream");

      // 关闭视频流  
      video.srcObject.getTracks().forEach((track) => track.stop());

      // let filename = "路线规划导出" + "." + type;
      // this.saveFile(imgData, filename);


    },
    /** 下载图片 */
    // const downloadBase64 = (dataUrl: string, fileName: string = 'download', fileExtension: string = "png") => {
    async screenshot1 (dataUrl, fileName) {
      // 将 base64 字符串转换为 Blob 对象
      const byteCharacters = atob(dataUrl.split(',')[1])
      const byteArrays = []
      for (let offset = 0; offset < byteCharacters.length; offset += 10240) {
        const slice = byteCharacters.slice(offset, offset + 10240)
        const byteNumbers = new Array(slice.length)
        for (let i = 0; i < slice.length; i++) {
          byteNumbers[i] = slice.charCodeAt(i)
        }
        const byteArray = new Uint8Array(byteNumbers)
        byteArrays.push(byteArray)
      }
      const blob = new Blob(byteArrays, { type: 'application/octet-stream' })
      const blobUrl = URL.createObjectURL(blob)
      const creatDom = document.createElement('a')
      document.body.appendChild(creatDom)
      creatDom.href = blobUrl
      creatDom.download = `${fileName}.png`;
      creatDom.click()
      document.body.removeChild(creatDom)
      URL.revokeObjectURL(blobUrl)
    },

    //截屏保存成图片
    async savepic () {
      let canvas = document.querySelector(".savemap");
      let that = this;
      html2canvas(canvas, {
        useCORS: true,
        tainttest: true,
        allowTaint: true,
        width: window.screen.availWidth,
        height: window.screen.availHeight,
      }).then(function (canvas) {
        let type = "png";
        let imgData = canvas.toDataURL(type);
        // 照片格式处理
        let _fixType = function (type) {
          type = type.toLowerCase().replace(/jpg/i, "jpeg");
          let r = type.match(/png|jpeg|bmp|gif/)[0];
          return "image/" + r;
        };
        imgData = imgData.replace(_fixType(type), "image/octet-stream");
        let filename = "路线规划导出" + "." + type;
        that.saveFile(imgData, filename);
      });
    },
    saveFile (data, filename) {
      let save_link = document.createElementNS(
        "http://www.w3.org/1999/xhtml",
        "a"
      );
      save_link.href = data;
      save_link.download = filename;

      let event = document.createEvent("MouseEvents");
      event.initMouseEvent(
        "click",
        true,
        false,
        window,
        0,
        0,
        0,
        0,
        0,
        false,
        false,
        false,
        false,
        0,
        null
      );
      save_link.dispatchEvent(event);
    },

  }
}
</script>

<style scoped lang="less">
.savemap {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.el-header {
  height: 60px;
  .logo {
    float: left;
    line-height: 60px;
    img {
      height: 50px;
      margin-right: 20px;
      vertical-align: middle;
    }
  }
  .title_name {
    text-align: center;
    line-height: 60px;
    font-size: 30px;
    color: #007acc;
    font-weight: 600;
  }
  .title_company {
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    color: #007acc;
    font-weight: 200;
  }
  .avatar {
    height: 60px;
    line-height: 60px;
    float: right;
    position: relative;
    .header_img {
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
      width: 40px;
      height: 40px;
      // background-color: #000;
      cursor: pointer;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .account_name {
      cursor: pointer;
      color: #007acc;
    }
    .account_info {
      width: 100px;
      line-height: 20px;
      border: 1px solid #ccc;
      background-color: #fff;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      span {
        display: block;
        text-align: center;
        line-height: 22px;
        color: #333;
        cursor: pointer;
        &:hover {
          color: #fff;
          background-color: #007acc;
        }
      }
    }
  }
}
.el-container {
  flex: 1;
}
.el-footer {
  width: 100%;
  min-height: 19.417vw !important;
  max-height: 40.417vw;
  z-index: 3;
  background: #fff;
  &.height0 {
    min-height: 0 !important;
    height: 0 !important;
  }
  // position: relative;
  // margin-bottom: 20px;
  .footer_title {
    line-height: 1.963vw;
    background-color: rgb(32, 105, 179);
    color: #fff;
    // cursor: s-resize;
    padding-left: 1.042vw;
    font-weight: 600;
    i {
      float: right;
      margin-right: 0.521vw;
      cursor: pointer;
    }
  }
}
// .el-aside {
//   // height: 300px;
//   overflow: hidden;
//   /deep/.handle-tm {
//     display: none !important;
//   }
// }
.cover {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.vdr {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  // bottom: 0 !important;
  height: 100% !important;
  width: 100% !important;
}
/deep/.handle-tm {
  width: 100% !important;
  height: 5px;
  top: -5px !important;
}
.mini_legend {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #dcdfe6;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  color: #007acc;
  font-size: 14px;
  &.right {
    right: 10px;
    left: auto;
  }
}
.edit-poly-list-wrap {
  position: absolute;
  left: 25px;
  top: 12%;
  .edit-poly-list {
    background: rgba(255, 255, 255, 0.9);
    height: 620px;
    width: 400px;
    border-radius: 5px;
    padding: 25px 10px 10px;
    overflow-x: hidden;
    overflow-y: auto;
  }
}
.map-operation {
  position: absolute;
  right: 2%;
  top: 180px;
  background: rgba(255, 255, 255, 0.9);
  // border: 1px solid #dcdfe6;
  box-shadow: 1px 1px 5px #666;
  border-radius: 3px;
  ul {
    li {
      list-style: none;
      float: left;
      color: #666;
      font-size: 15px;
      padding: 5px 12px;
      position: relative;
      cursor: pointer;
      i {
        margin-right: 3px;
        // font-size: 14px;
        // &:before {
        //   font-size: inherit;
        //   color: inherit;
        // }
      }
      &::before {
        display: block;
        content: '';
        width: 1px;
        height: 13px;
        background: #dcdfe6;
        position: absolute;
        right: 0;
        top: 8px;
      }
      // &:last-child {
      //   &::before {
      //     display: none;
      //   }
      // }
      // &.active {
      //   color: #007acc;
      // }
    }
  }
}
.sliderHistory {
  border-radius: 10px;
  background-color: #007acc;
  width: 300px;
  position: absolute;
  right: 2%;
  top: 150px;
  height: 50px;
  padding: 10px 30px 0px;
}
.work-type-wrap {
  position: absolute;
  right: 2%;
  top: 100px;
  height: 150px;
  .map-btn {
    width: 320px;

    padding: 10px 20px;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 100%;
  }
}
</style>
